<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒子模型</title>
    <style>
      /*  div {
        width: 300px;
        height: 200px;
        边框粗细*/
      /*border-width: 5px;
      边框的样式   solid 实线边框  dashed 虚线边框  dotted 点线边框
            border-style: solid;
            border-style: dashed;*/
      /*border-style: dotted;
      边框颜色*/
      /*border-color: blueviolet;
      
        边框简写
        border: 粗细 样式 颜色 没有顺序
        border-top: 粗细 样式 颜色 (没有顺序) -> 只设定上边框，其余边框同理
        
      }*/
      .test {
        width: 300px;
        height: 200px;
        /*上边框*/
        border-top: 5px solid pink;
        /*下边框*/
        border-bottom: 5px dotted purple;
        /*右边框*/
        border-right: 5px solid red;
        /*左边框*/
        border-left: 5px solid red;
      }
      /*边框会影响盒子的实际大小*/
      .test1 {
        width: 200px;
        height: 200px;
        background-color: red;
        border: 10px solid pink;
      }
      .test2 {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*
        内边距
        边框与内容之间的距离
        也会影响盒子的实际大小
        padding-left: ;左内边距
        padding-top: ;上内边距
        padding-bottom: ;下内边距
        padding-right: ;右内边距

        内边距复合写法
        padding:5px;  1个值，代表上下左右都有5像素内边距
        padding:5px 10px;  2个值，代表上下内边距是5像素，左右内边距是10像素
        padding:5px 10px 20px;  三个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
        padding: 5px 10px 20px 30px; 4个值，代表上内边距5像素，右内边距10像素，下内边距20像素，左内边距30像素 ->顺时针
        */
        padding: 20px;
        /*
        如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小
        如果盒子本身没有指定 width/height 属性，则此时 padding 不会撑开盒子大小
        */
      }
      /*
      外边距
      用法与内边距相同
      */
      /* div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
       .one {
        margin-bottom: 20px;
      } 
      .two {
        margin-top: 20px;
      }*/

      /*
      使盒子水平居中
      外边距可以让盒子水平居中，但必须满足两个条件：盒子必须指定了宽度（width)和盒子左右的外边距都设置为 auto
      上面方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center即可
      
      .header {
        width: 300px;
        height: 200px;
        background-color: pink;
        margin: 0 auto;
        text-align: center;
      }*/
      /*
      外边距合并-嵌套块级元素垂直且外边距塌陷
      解决方案：
      1.可以为父元素定义上边框
      2.可以为父元素定义上内边框
      3.可以为父元素添加 overflow:hidden
      */
      .father {
        width: 400px;
        height: 400px;
        background-color: purple;
        margin-top: 50px;
        /*border: 1px solid red;
        border: 1px solid transparent;
        padding: 1px;
        overflow: hidden;*/
      }
      .son {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin-top: 100px;
      }

      /*
      清除内外边距
      这句话也是我们 CSS的第一行代码
      */
      * {
        padding: 0; /*清除内边距*/
        margin: 0; /*清除外边距*/
      }
      span {
        background-color: pink;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 
    网页布局过程:
    1.先准备好相应的网页元素，网页元素基本都是盒子
    2.利用 CSS 设置好盒子样式，然后摆放在相应的位置 ->核心
    3.往盒子里面装内容
    盒子模型组成：border边框 、content内容 、padding内边框 和 外边框 margin
     -->
    <!--<h4>边框</h4>
      
    <div></div>
    <div class="test"></div>
    <div class="test1"></div>
    <h4>内边距</h4>
    <div class="test2">盒子的内容盒子的内容盒子的内容盒子的内容盒子的内容</div>

    <h4>外边距</h4>
    <div class="one">1</div>
    <div class="two">2</div>

    <div class="header">
      <span>文字</span>
    </div>
    <div class="header">
      <img src="../image/bg1.png" alt="" />
    </div>

    <div class="father">
      <div class="son"></div>
    </div>-->

    <h4>清除内外边距</h4>
    <ul>
      123
      <li>acff</li>
    </ul>
    <span
      >行内元素尽量设置左右的内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了</span
    >
  </body>
</html>
